<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-语义化和非语义化标签</title>
</head>
<body>
    <!-- 
        非语义化:
            div 块元素 
                {
                    独占一行(不干预的情况下)
                }
            span 非块元素
                {
                    在一行显示(不干预的情况下)
                }
     -->
    <div>高温橙色预警:这些地方40℃以上1</div>
    <div>高温橙色预警:这些地方40℃以上2</div>
    <span>谭乔自曝或面临牢狱之灾1</span>
    <span>谭乔自曝或面临牢狱之灾2</span>
    <hr>
    <!-- 
        html+css    
        html5+css3  增加了一些标签 css的写法
     -->
    <!-- 没有语义化标签时，如何处理呢? -->
    <div class="header">
        <div class="nav"></div>
    </div>
    <div class="aside"></div>
    <div class="section">
        <div class="article"></div>
    </div>
    <div class="footer"></div>
    <!-- 没有语义化标签时，如何处理呢?end -->

    <!-- 语义化标签 -->
    <header>
        <nav>导航</nav>
    </header>
    <aside>侧边栏</aside>
    <section>
        右边区域
        <article>文章</article>
    </section>
    <footer>底部</footer>
    <!-- 语义化标签end -->
</body>
</html>